import { 
    defineComponent,
    toRefs, 
    ref, 
    onMounted,
    reactive
} from "vue";
import echarts from 'echarts'

export default defineComponent({
    name: 'histogram',
    // 通过对象形式列出prop，这些property的名称和值分别是prop各自的名称和类型。
    props: {
        data: Object,
        id: String,
        name: String,
    },
    setup(props,context){
        
        console.log(context)

        const newProps = toRefs(props)

        const echartsData = reactive({
            data: ref(newProps.data),
            id: ref(newProps.id),
            name: ref(newProps.name),
        })

        const draw = () => {
            //指定图表的配置项和数据
            const option = {
                color: ['#1989fa','red'],
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        data: echartsData.data
                    }
                ]
                
            };
            const myChart = echarts.init(document.getElementById(echartsData.id));
            myChart.setOption(option);
        }


        const download = () => {
            const myChart = echarts.init(document.getElementById(echartsData.id));
            myChart.resize();
            const a = document.createElement('a')
            a.download = echartsData.name
            a.href = myChart.getDataURL({
                type: "png",
                backgroundColor: "#fff"
            });
            a.click();
        }


        onMounted(() => {
            setTimeout(() => {
                draw()
            })
            
        });

        return {
            echartsData,
            download

        }
      
    },  
    
})



// 父子组件共享普通数据
// 父组件
// import { provide } from '@vue/composition-api'
//   setup(){
//     provide('themeColor','red')  // 键值
//  },
// 子组件
// import { inject } from '@vue/composition-api'
//   setup(){
//     const  color = inject('themeColor');
//     return {
//         color: color,
//     }
//  },


